<template>
    <div>
        <button-bar theme="energized" :tab-items="promotions" :tab-index="promotionIndex" :on-tab-click="index => promotionIndex = index"></button-bar>
        <div class="page">
            <scroll class="page-content packet" :class="[redRefreshing||noMoreRed?'noMoreLoading':'']" :on-refresh="reLoadRed" :on-infinite="loadMoreRed" v-show="promotionIndex == 0" ref="redScroller">
                <ul class="list" v-if="reds&&reds.length>0">
                    <li v-for="red in reds" :class="[red.status==0?'securities':'',red.status==1?'already':'',red.status==2?'expired':'']">
                        <img v-if="red.status==0" :src="securitiesImg">
                        <img v-else-if="red.status==1" :src="alreadyImg">
                        <img v-else-if="red.status==2" :src="expiredImg">
                        <img v-else :src="invalidImg">
                        <div class="limit">
                            ￥
                            <span>{{red.amount}}</span>
                        </div>
                        <div class="detail">
                            <h3>{{red.sourceType|sourceText}}</h3>
                            <p>仅限在财优优客户端使用</p>
                            <p>有效期：{{red.addTime}}~{{red.expiredTime}}</p>
                        </div>
                    </li>
                </ul>
                <div class="empty" v-if="noMoreRed&&reds.length==0">
                    <img src="static/img/empty@3x.png" >
                </div>
            </scroll>
            <scroll class="page-content interest" :class="[couponRefreshing||noMoreCoupon?'noMoreLoading':'']" :on-refresh="reLoadCoupon" :on-infinite="loadMoreCoupon" v-show="promotionIndex == 1" ref="couponScroller">
                <ul class="list" v-if="coupons&&coupons.length>0">
                    <li v-for="coupon in coupons" :class="[coupon.status==0?'securities':'',coupon.status==1?'already':'',coupon.status==2?'expired':'']">
                        <img v-if="coupon.status==0" :src="securitiesImg">
                        <img v-else-if="coupon.status==1" :src="alreadyImg">
                        <img v-else-if="coupon.status==2" :src="expiredImg">
                        <img v-else :src="invalidImg">
                        <div class="limit">
                            <span>{{coupon.upApr}}</span>%
                        </div>
                        <div class="detail">
                            <h3>{{coupon.sourceType|sourceText}}</h3>
                            <p>仅限在财优优客户端使用</p>
                            <p>有效期：{{coupon.sendDate}}~{{coupon.endTime}}</p>
                        </div>
                    </li>
                </ul>
                <div class="empty" v-if="noMoreCoupon&&coupons.length==0">
                    <img src="static/img/empty@3x.png" />
                </div>
            </scroll>
        </div>
    </div>
</template>
<script src="./Privilege.js"></script>
<style lang="scss" scoped src="./Privilege.scss"></style>